<template>
    <div>
        <div class="header-title">
            <span @click="$router.go(-1)" class="mint-toast-icon mintui mintui-back"></span>
            <span>我的活动</span>
            <span></span>
        </div>
        <!-- 列表 -->
        <div class="choose-type">
            <span @click="chooseType = 1,pageNum=1" :class="[chooseType == 1?'chooseNow':'']">未开始</span>
            <span @click="chooseType = 2,pageNum=1" :class="[chooseType == 2?'chooseNow':'']">进行中</span>
            <span @click="chooseType = 3,pageNum=1" :class="[chooseType == 3?'chooseNow':'']">已结束</span>
        </div>
        <!-- 未开始 -->
        <div class="house scroll-range" style="height:80vh" v-if="chooseType == 1?true:false">
             <etoList></etoList>
            <bgStatus v-show="false" :bgImg = bgImg :bgWord = bgWord></bgStatus>
        </div>
        <div class="area scroll-range" style="height:80vh" v-if="chooseType == 2?true:false">
            <etoList></etoList>
            <bgStatus v-show="false" :bgImg = bgImg :bgWord = bgWord></bgStatus>
        </div>
        <div class="area scroll-range" style="height:80vh" v-if="chooseType == 3?true:false">
            <etoList></etoList>
            <bgStatus v-show="false" :bgImg = bgImg :bgWord = bgWord></bgStatus>
        </div>
    </div>
</template>
<script>
import bgStatus from '../../components/bgStatus'
import etoList from '../../components/etoList'
export default {
    data(){
        return{
           chooseType: "1",
        //    暂无
        bgImg:require('../../assets/img/wudingdan.png'),
            bgWord:"暂无收藏",
        }
    },
     components:{
        bgStatus,
        etoList
    },
}
</script>
<style lang="less" scoped>
.header-title {
    border-bottom: 1px solid @blackColor3;
}
.chooseNow {
    color: @blueColor5;
    border-bottom: 2px solid @blueColor10 !important;
}
.choose-type {
    .flexStartCenter();
    font-size: 14px;
    font-weight: bold;
    color: @blackColor8;
    padding: 0 15px;
    span {
        display: inline-block;
        width: 50%;
        text-align: center;
        padding: 10px 0;
        border-bottom: 2px solid @blackColor3;
    }
}
//地区
.area {
    .source-list {
        padding: 10px 15px 15px;
        .source-list-detail {
            .flexBetween();
            width: 100%;
            height: 128px;
            padding: 10px;
            box-shadow: 0 0 8px 2px #eee;
            margin-bottom: 20px;
            > .source-list-detail-left {
                width: 40%;
                .flexCenterContent();
                margin-right: 10px;
                position: relative;
                div:nth-child(2) {
                    position: absolute;
                    left: 10%;
                    top: 70%;
                    width: 80%;
                    background-color: rgba(0, 0, 0, 0.5);
                    font-size: 12px;
                    color: @white;
                    padding: 4px 2px;
                    .flexCenterCenter();
                    border-radius: 4px;
                    img {
                        width: 10px;
                        margin-right: 4px;
                    }
                }
            }
            .source-list-detail-right {
                width: 60%;
                padding-top: 10px;
                position: relative;
                p:nth-child(1) {
                    font-size: 14px;
                    color: @blackColor8;
                    font-weight: bold;
                }
                p:nth-child(2) {
                    font-size: 12px;
                    color: @blueColor5;
                    margin: 4px 0 2px;
                }
                .list-line {
                    height: 7px;
                    .mt-progress-content {
                        height: 7px;
                        .mt-progress-runway {
                            border-radius: 10px;
                            overflow: hidden;
                            background-color: @white;
                            border: 1px solid @blackColor3;
                            height: 7px;
                        }
                        .mt-progress-progress {
                            border-radius: 10px;
                            overflow: hidden;
                            width: 20%;
                            height: 7px;
                        }
                    }
                }
                > div:nth-child(4) {
                    .flexStartCenter();
                    margin: 4px 0 2px;
                    span:nth-child(1) {
                        font-size: 12px;
                        color: @blackColor7;
                    }
                    span:nth-child(2) {
                        font-size: 12px;
                        color: @blackColor7;
                        margin: 0 10px;
                    }
                    span:nth-child(3) {
                        font-size: 16px;
                        color: @blueColor10;
                        font-weight: bold;
                    }
                }
                > p:nth-child(5) {
                    font-size: 12px;
                    color: @blackColor5;
                }
                .area-collect {
                    position: absolute;
                    right: 10px;
                    top: 10px;
                    img {
                        width: 20px;
                    }
                }
            }
        }
    }
}
</style>


